import React from 'react';
import { Form, Input, Modal, message } from 'antd';
import './alterPassword.css';

const FormItem = Form.Item;
class AlterPassword extends React.Component {
    state = {
        alter_visible: false,
        confirmDirty: false
    };

    componentWillReceiveProps(nextProps) {
        this.setState({
            alter_visible: nextProps.alter_visible
        });
    }

    handleConfirmBlur = (e) => {
        const value = e.target.value;
        this.setState({ confirmDirty: this.state.confirmDirty || !!value });
    };

    compareToFirstPassword = (rule, value, callback) => {
        const form = this.props.form;
        if (value && value !== form.getFieldValue('newPassword')) {
            callback('两次输入的密码不一致！');
        } else {
            callback();
        }
    };

    validateToNextPassword = (rule, value, callback) => {
        const form = this.props.form;
        if (value && this.state.confirmDirty) {
            form.validateFields(['confirm'], { force: true });
        }
        callback();
    };

    handleCancel = () => {
        // this.props.handleForm()
        this.clear();
    };

    handleOk = (e) => {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            if (!err) {
                this.$post('/user/changePassword', values).then((res) => {
                    if (res.event === 0) {
                        message.success(res.msg);
                        console.log(res.msg);
                        this.setState({ alter_visible: false });
                        this.clear();
                    } else if (res.event === 1) {
                        this.props.form.resetFields();
                        console.log(res.msg);
                        message.error(res.msg);
                    }
                });
            }
        });
    };

    onClose = () => {
        this.setState({
            alter_visible: false
        });
        this.clear();
    };

    clear = () => {
        this.props.form.resetFields();
        this.props.close();
    };

    render() {
        const { getFieldDecorator } = this.props.form;
        const formItemLayout = {
            labelCol: {
                xs: { span: 20 },
                sm: { span: 9 }
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 10 }
            }
        };

        return (
            <Modal
                title="修改密码"
                onClose={this.onClose}
                visible={this.state.alter_visible}
                onCancel={this.handleCancel}
                onOk={this.handleOk}
                okText="确认"
                cancelText="取消">
                <div id="changePassword">
                    <p>
                        <Form>
                            <FormItem
                                label="请输入原密码："
                                hasFeedback
                                style={{ marginBottom: '8px' }}
                                {...formItemLayout}>
                                {getFieldDecorator('password', {
                                    rules: [
                                        {
                                            required: true,
                                            message: '请输入原密码！'
                                        },
                                        {
                                            validator: this
                                                .validateToNextPassword
                                        },
                                        {
                                            min: 6,
                                            message: '长度不在范围内'
                                        }
                                    ]
                                })(<Input type="Password" />)}
                            </FormItem>
                            <FormItem
                                label="请输入新密码："
                                hasFeedback
                                style={{ marginBottom: '8px' }}
                                {...formItemLayout}>
                                {getFieldDecorator('newPassword', {
                                    rules: [
                                        {
                                            required: true,
                                            message: '请输入新密码！'
                                        },
                                        {
                                            validator: this
                                                .validateToNextPassword
                                        },
                                        {
                                            min: 6,
                                            message: '长度不在范围内'
                                        }
                                    ]
                                })(<Input type="Password" />)}
                            </FormItem>
                            <Form.Item
                                label="确认新密码："
                                hasFeedback
                                style={{ marginBottom: '8px' }}
                                {...formItemLayout}>
                                {getFieldDecorator('confirm', {
                                    rules: [
                                        {
                                            required: true,
                                            message: '请再次输入新密码！'
                                        },
                                        {
                                            validator: this
                                                .compareToFirstPassword
                                        },
                                        {
                                            min: 6,
                                            message: '长度不在范围内'
                                        }
                                    ]
                                })(
                                    <Input
                                        type="password"
                                        onBlur={this.handleConfirmBlur}
                                    />
                                )}
                            </Form.Item>
                        </Form>
                    </p>
                </div>
            </Modal>
        );
    }
}
export default Form.create()(AlterPassword);
